<template>
  <!--   身份证信息-->
  <div style="padding: 0 10px;">
    <el-row :gutter="24">
      <el-col style="background-color: #fffbed" :span="3" class="info_item">
        <div class="item_content" :title="$t('姓名')">{{ $t('姓名') }}</div>
      </el-col>
      <el-col :span="3" class="info_item">
        <div class="item_content" :title="data.name">{{ data.name }}</div>
      </el-col>
      <el-col style="background-color: #fffbed" :span="3" class="info_item">
        <div class="item_content" :title="$t('性别')">{{ $t('性别') }}</div>
      </el-col>
      <el-col :span="3" class="info_item">
        <div class="item_content">{{ data.gender }}</div>
      </el-col>
      <el-col style="background-color: #fffbed" :span="3" class="info_item">
        <div class="item_content" :title="$t('身份证')">{{ $t('身份证') }}</div>
      </el-col>
      <el-col :span="9" class="info_item">
        <div class="item_content">{{ data.idcard }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col style="background-color: #fffbed" :span="3" class="idcard_item">
        <div :title="$t('身份证正面')">{{ $t('身份证正面') }}</div>
      </el-col>
      <el-col :span="9" class="idcard_item">
        <el-image
            style="width: 100%;height: 100%;"
            :src="data.frontIdCardUrl"
            :preview-src-list="[data.frontIdCardUrl]"
        >
        </el-image>
      </el-col>
      <el-col style="background-color: #fffbed" :span="3" class="idcard_item">
        <div class="item" :title="$t('身份证反面')">{{ $t('身份证反面') }}</div>
      </el-col>
      <el-col :span="9" class="idcard_item">
        <el-image
            style="width: 100%;height: 100%;"
            :src="data.negativeIdCardUrl"
            :preview-src-list="[data.negativeIdCardUrl]"
        >
        </el-image>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col style="background-color: #fffbed" :span="3" class="idcard_item">
        <div class="item" :title="$t('手持身份证')">{{ $t('手持身份证') }}</div>
      </el-col>
      <el-col :span="9" class="idcard_item">
        <el-image
            style="width: 100%;height: 100%;"
            :src="data.handIdCardUrl"
            :preview-src-list="[data.handIdCardUrl]"
        >
        </el-image>
      </el-col>
      <el-col style="background-color: #fffbed" :span="3" class="idcard_item">
        <div class="item">{{ $t('无感抓拍') }}</div>
      </el-col>
      <el-col :span="9" class="idcard_item">
        <el-image
            style="width: 100%;height: 100%;"
            :src="data.faceImg"
            :preview-src-list="[data.faceImg]"
        >
        </el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {idCardInfo} from '@/api/order'
export default {
  props: ['routesQuery'],
  data() {
    return {
      data: {
        childrenNum: 0,
        frontIdCardUrl: "",
        gender: "",
        handIdCardUrl: "",
        idcard: "",
        name: "",
        negativeIdCardUrl: "",
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const {userStubId} = this.routesQuery
      const res = await idCardInfo({
        userStubId: parseInt(userStubId)
      })
      if (res.code === 1 && res.data) {
        this.data = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.info_item {
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  height: 60px;
  line-height: 60px;
  justify-content: center;
  .item_content {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.idcard_item {
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  height: 300px;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
